@use "sass:color";
@use "./variables" as *;

// Common button styles basic.
button {
  border: 1px solid;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s ease;

  &:hover {
    background-color: color.mix(white, $light-foreground, 10%);
    border-color: color.mix(white, $light-foreground, 10%);
  }

  &:active {
    background-color: color.mix(black, $light-foreground, 10%);
    border-color: color.mix(black, $light-foreground, 10%);
  }

  &:disabled {
    cursor: not-allowed;
  }
}

// Color-specific button styles for light theme.
body,
body[data-theme="light"] {
  button {
    background-color: $light-foreground;
    color: $light-background;
    border-color: $light-foreground;

    &:disabled {
      background-color: #cccccc;
      color: #666666;
      border-color: #cccccc;
    }
  }
}

// Color-specific button styles for dark theme.
body [data-theme="dark"] {
  button {
    background-color: $dark-foreground;
    color: $dark-background;
    border-color: $dark-foreground;

    &:disabled {
      background-color: #444444;
      color: #888888;
      border-color: #444444;
    }
  }
}
